<template>
  <v-app id="inspire">
      <v-content >
        <v-container fluid fill-height style="position:absolute;z-index:9999;top:300px;">
          <v-layout align-center justify-center>
            <v-flex xs12 sm8 md3 class="loginInput">
              <v-card class="elevation-12" >
                <v-toolbar dark color="primary">
                  <v-toolbar-title>欢迎使用灿谷混合云平台</v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-alert color="error" icon="warning" v-model="alert">
                  {{msg}}
                </v-alert>
                <v-card-text>
                  <v-form v-model="valid"  ref="loginform" lazy-validation>
                    <v-text-field prepend-icon="person" label="用户名" v-model="username" :rules="usernameRules"  required></v-text-field>
                    <v-text-field prepend-icon="lock" label="密码" id="password" type="password" v-model="password" :rules="passwordRules" required></v-text-field>
                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" @click="login($refs.loginform)" :disabled="!valid"><h4>登录</h4></v-btn>
                  <v-btn @click="clearLogin($refs.loginform)"><h4>清空</h4></v-btn>
                  <v-btn v-show="showApp" color="primary" flat @click="downLoadApp()"><h4>下载APP</h4></v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-content>
    <div id="canvasFloat"></div>
    <script id="vs" type="x-shader/x-vertex">
          varying vec2 vUv;
          void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
          }
        </script>
        <script id="fs" type="x-shader/x-fragment">
          uniform sampler2D map;
          uniform vec3 fogColor;
          uniform float fogNear;
          uniform float fogFar;
          varying vec2 vUv;
          void main() {
            float depth = gl_FragCoord.z / gl_FragCoord.w;
            float fogFactor = smoothstep( fogNear, fogFar, depth );
            gl_FragColor = texture2D( map, vUv );
            gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
            gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
          }
        </script>
  </v-app>
</template>

<script>
import {getLocalStorage} from '../../utils/localStorage'
import router from '../../router/index'
import {Detector} from '../../utils/Detector'
import * as THREE from 'three'
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('auth')
let container, camera, scene, renderer, mesh, geometry, material
let mouseX = 0
let mouseY = 0
let startTime = Date.now()
let windowHalfX = window.innerWidth / 2
let windowHalfY = window.innerHeight / 2

export default {
  name: 'login',
  data: function () {
    return this.$store.state.auth
  },
  mounted: function () {
    if (getLocalStorage('admin-token')) {
      router.push('/')
    }
    if (!Detector.webgl) Detector.addGetWebGLMessage()
    this.init()
    /* if (this.$refs.loginWindow.clientWidth > 768) {
      this.showApp = true
    } */
  },
  methods: {
    ...mapActions({
      login: 'login',
      clearLogin: 'clearLogin',
      downLoadApp: 'downLoadApp'
    }),
    init () {
      container = document.getElementById('canvasFloat')
      // document.body.appendChild(container)
      var canvas = document.createElement('canvas')
      canvas.width = 32
      canvas.height = window.innerHeight
      var context = canvas.getContext('2d')
      var gradient = context.createLinearGradient(0, 0, 0, canvas.height)
      gradient.addColorStop(0, '#1e4877')
      gradient.addColorStop(0.5, '#4584b4')
      context.fillStyle = gradient
      context.fillRect(0, 0, canvas.width, canvas.height)
      container.style.background = 'url(' + canvas.toDataURL('image/png') + ')'
      container.style.backgroundSize = '32px 100%'
      camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000)
      camera.position.z = 6000
      scene = new THREE.Scene()
      geometry = new THREE.Geometry()
      var texture = THREE.ImageUtils.loadTexture('/static/cloud10.png', null, this.animate)
      texture.magFilter = THREE.LinearMipMapLinearFilter
      texture.minFilter = THREE.LinearMipMapLinearFilter
      var fog = new THREE.Fog(0x4584b4, -100, 3000)
      material = new THREE.ShaderMaterial({
        uniforms: {
          'map': {type: 't', value: texture},
          'fogColor': {type: 'c', value: fog.color},
          'fogNear': {type: 'f', value: fog.near},
          'fogFar': {type: 'f', value: fog.far}
        },
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent,
        depthWrite: false,
        depthTest: false,
        transparent: true
      })
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64))
      for (var i = 0; i < 8000; i++) {
        plane.position.x = Math.random() * 1000 - 500
        plane.position.y = -Math.random() * Math.random() * 200 - 15
        plane.position.z = i
        plane.rotation.z = Math.random() * Math.PI
        plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5
        THREE.GeometryUtils.merge(geometry, plane)
      }
      mesh = new THREE.Mesh(geometry, material)
      scene.add(mesh)
      mesh = new THREE.Mesh(geometry, material)
      mesh.position.z = -8000
      scene.add(mesh)
      renderer = new THREE.WebGLRenderer({antialias: false})
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)
      document.addEventListener('mousemove', this.onDocumentMouseMove, false)
      window.addEventListener('resize', this.onWindowResize, false)
    },
    onDocumentMouseMove (event) {
      mouseX = (event.clientX - windowHalfX) * 0.25
      mouseY = (event.clientY - windowHalfY) * 0.15
    },
    onWindowResize (event) {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    },
    animate () {
      requestAnimationFrame(this.animate)
      let position = ((Date.now() - startTime) * 0.03) % 8000
      camera.position.x += (mouseX - camera.position.x) * 0.01
      camera.position.y += (-mouseY - camera.position.y) * 0.01
      camera.position.z = -position + 8000
      renderer.render(scene, camera)
    }
  }
}
</script>

<style scoped>
.loginInput{opacity: 0.3;}
.loginInput:hover{opacity: 0.7;}
</style>
